<template>
    <div ref="scrollCon" @DOMMouseScroll="handlescroll" @mousewheel="handlescroll" class="tags-scroll-content">
        <div ref="scrollBody" class="tags-scroll-body" :style="{ left: tagBodyLeft + 'px' }">
            <transition-group name="taglist-moving-animation">
                <Tag
                    type="dot"
                    v-for="item in pageTagsList"
                    ref="tagsPageOpened"
                    :key="item.name"
                    :name="item.name"
                    @on-close="closePage"
                    @click.native="linkTo(item)"
                    :closable="item.name == 'home_index' ? false : true"
                    :color="item.children ? (item.children[0].name == currentPageName ? 'primary' : 'default') : item.name == currentPageName ? 'primary' : 'default'"
                >
                    {{ itemTitle(item) }}
                </Tag>
            </transition-group>
        </div>
        <div class="close-tag-content">
            <Dropdown transfer trigger="hover" @on-click="handleTagsOption" placement="bottom-end" transfer-class-name="close-tag-dropdown">
                <div class="icon-content">
                    <Icon type="ios-arrow-down" size="16" />
                </div>
                <DropdownMenu slot="list">
                    <DropdownItem name="clearAll">{{ $t('closeAll') }}</DropdownItem>
                    <DropdownItem name="clearOthers">{{ $t('closeOthers') }}</DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </div>
    </div>
</template>

<script>
export default {
    name: 'tagsPageOpened',
    data() {
        return {
            currentPageName: this.$route.name,
            tagBodyLeft: 0,
            paddingRight: 40,
            refsTag: [],
            tagsCount: 1
        };
    },
    props: {
        pageTagsList: Array,
        beforePush: {
            type: Function,
            default: item => {
                return true;
            }
        }
    },
    computed: {
        title() {
            return this.$store.state.app.currentTitle;
        },
        tagsList() {
            return this.$store.state.app.pageOpenedList;
        }
    },
    methods: {
        itemTitle(item) {
            if (typeof item.title == 'object') {
                return this.$t(item.title.i18n);
            } else {
                return item.title;
            }
        },
        closePage(event, name) {
            let pageOpenedList = this.$store.state.app.pageOpenedList;
            let lastPageObj = pageOpenedList[0];
            if (this.currentPageName == name) {
                let len = pageOpenedList.length;
                for (let i = 1; i < len; i++) {
                    if (pageOpenedList[i].name == name) {
                        if (i < len - 1) {
                            lastPageObj = pageOpenedList[i + 1];
                        } else {
                            lastPageObj = pageOpenedList[i - 1];
                        }
                        break;
                    }
                }
            } else {
                let tagWidth = event.target.parentNode.offsetWidth;
                this.tagBodyLeft = Math.min(this.tagBodyLeft + tagWidth, 0);
            }
            this.$store.commit('removeTag', name);
            this.$store.commit('closePage', name);
            pageOpenedList = this.$store.state.app.pageOpenedList;
            sessionStorage.pageOpenedList = JSON.stringify(pageOpenedList);
            if (this.currentPageName == name) {
                this.linkTo(lastPageObj);
            }
        },
        linkTo(item) {
            if (this.$route.name == item.name) {
                return;
            }
            let routerObj = {};
            routerObj.name = item.name;
            if (item.argu) {
                routerObj.params = item.argu;
            }
            if (item.query) {
                routerObj.query = item.query;
            }
            if (this.beforePush(item)) {
                this.$router.push(routerObj);
            }
        },
        handlescroll(e) {
            var type = e.type;
            let delta = 0;
            if (type == 'DOMMouseScroll' || type == 'mousewheel') {
                delta = e.wheelDelta ? e.wheelDelta : -(e.detail || 0) * 40;
            }
            let left = 0;
            if (delta > 0) {
                left = Math.min(0, this.tagBodyLeft + delta);
            } else {
                if (this.$refs.scrollCon.offsetWidth - 100 < this.$refs.scrollBody.offsetWidth) {
                    if (this.tagBodyLeft < -(this.$refs.scrollBody.offsetWidth - this.$refs.scrollCon.offsetWidth + this.paddingRight)) {
                        left = this.tagBodyLeft;
                    } else {
                        left = Math.max(this.tagBodyLeft + delta, this.$refs.scrollCon.offsetWidth - this.$refs.scrollBody.offsetWidth - this.paddingRight);
                    }
                } else {
                    this.tagBodyLeft = 0;
                }
            }
            this.tagBodyLeft = left;
        },
        handleTagsOption(type) {
            if (type == 'clearAll') {
                this.$store.commit('clearAllTags');
                this.$router.push({
                    name: 'home_index'
                });
            } else {
                this.$store.commit('clearOtherTags', this);
            }
            this.tagBodyLeft = 0;
        },
        moveToView(tag) {
            if (tag.offsetLeft < -this.tagBodyLeft) {
                // 标签在可视区域左侧
                this.tagBodyLeft = -tag.offsetLeft + 10;
            } else if (tag.offsetLeft + 10 > -this.tagBodyLeft && tag.offsetLeft + tag.offsetWidth < -this.tagBodyLeft + this.$refs.scrollCon.offsetWidth - this.paddingRight) {
                // 标签在可视区域
                this.tagBodyLeft = Math.min(0, this.$refs.scrollCon.offsetWidth - this.paddingRight - tag.offsetWidth - tag.offsetLeft - 20);
            } else {
                // 标签在可视区域右侧
                this.tagBodyLeft = -(tag.offsetLeft - (this.$refs.scrollCon.offsetWidth - this.paddingRight - tag.offsetWidth) + 20);
            }
        }
    },
    mounted() {
        this.refsTag = this.$refs.tagsPageOpened;
        setTimeout(() => {
            this.refsTag.forEach((item, index) => {
                if (this.$route.name == item.name) {
                    let tag = this.refsTag[index].$el;
                    this.moveToView(tag);
                }
            });
        }, 1); // 这里不设定时器就会有偏移bug
        this.tagsCount = this.tagsList.length;
    },
    watch: {
        $route(to) {
            this.currentPageName = to.name;
            this.$nextTick(() => {
                this.refsTag.forEach((item, index) => {
                    if (to.name == item.name) {
                        let tag = this.refsTag[index].$el;
                        this.moveToView(tag);
                    }
                });
            });
            this.tagsCount = this.tagsList.length;
        }
    }
};
</script>

<style lang="less">
.tags-scroll-content {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    z-index: 0;
    overflow: hidden;
    background: #f0f2f5;
    padding-right: 40px;

    .tags-scroll-body {
        position: absolute;
        padding: 2px 10px;
        overflow: visible;
        white-space: nowrap;
        transition: left 0.3s ease;
        // 自定义Tag样式
        .ivu-tag {
            font-size: 14px;
            padding: 0 16px;
            .ivu-icon-ios-close {
                font-size: 16px;
                margin-left: 3px !important;
                margin-right: -5px;
                top: 0px;
            }
            .ivu-tag-text {
                color: #74788d;
                transition: all 0.2s ease-in-out;
            }
            &:hover {
                .ivu-tag-text {
                    color: #2d8cf0;
                }
            }
        }
        .ivu-tag-primary .ivu-tag-text {
            color: #2d8cf0;
        }
        .ivu-tag-dot-inner {
            display: none;
        }
    }

    .close-tag-content {
        position: absolute;
        right: 0;
        top: 0;
        .icon-content {
            background: white;
            box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
            z-index: 10;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    }
}
.close-tag-dropdown {
    right: 5px !important;
}
</style>
